<template lang="jade">
main
  .news
    .news-block(v-for="(index, el) in list")
      img(:src="el.img")
      .title
        h3 不能说的秘密
      .like(@click="like(index)", :class="{active: el.liked}")
        i.fa.fa-heart
        | {{el.likeNum}}
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        default() {
          return [{
            img: 'http://www.52ij.com/uploads/allimg/160317/1110104P8-4.jpg',
            likeNum: likeNum(),
            liked: false
          },
          {
            img: 'http://www.52ij.com/uploads/allimg/160317/1110104P8-4.jpg',
            likeNum: likeNum(),
            liked: false
          }]
        }
      },
    },
    methods: {
      like(index) {
        this.list[index].liked ?
        this.list[index].likeNum--
        :
        this.list[index].likeNum++
        this.list[index].liked = !this.list[index].liked
      }
    }
  }
  function likeNum() {
    return '3' + (Math.random() + '').slice(-1) + (Math.random() + '').slice(-1) + (Math.random() + '').slice(-1)
  }
</script>

<style lang="less" scoped>
  @import "../less/libs/color-vars.less";
  .news{
    // padding-right: 8px;
    .news-block {
      position: relative;
      margin-bottom: 0.07rem;
      img {
        width: 100%;
        display: block;
      }
      .title {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        padding-left: 0.71rem;
        color: #fff;
        background: -webkit-linear-gradient(top,transparent,rgba(0,0,0,0.6));
        line-height: 0;
        h3 {
          margin-top: 1.2rem;
          margin-bottom: 1.2rem;
        }
      }
      .like {
        position: absolute;
        right: 0.71rem;
        top: 0.71rem;
        background-color: rgba(0,0,0,0.5);
        border-radius: 1.42rem;
        padding: 3px 0.71rem;
        color: #fff;
        i {
          margin-right: 0.35rem;
        }
      }
      .like.active {
        color: @themeColor;
      }
    }
  }
</style>
